<template>
  <div class="detail">
    <div class="box1">
      <div class="btn">
        <el-button type="primary" @click="back">返回</el-button>
      </div>
      <el-tabs type="border-card">
        <el-tab-pane label="缴费详情">
          <el-form ref="form" :model="form" label-width="80px">
            <div class="top">
              <el-form-item label="缴费产品">
                <el-input v-model="form.payname" disabled></el-input>
              </el-form-item>
              <el-form-item label="缴费人员">
                <el-input
                  v-model="form.username"
                  disabled
                ></el-input> </el-form-item
              ><el-form-item label="缴费金额">
                <el-input
                  v-model="form.paymoney"
                  disabled
                ></el-input> </el-form-item
              ><el-form-item label="缴费优先级">
                <el-input
                  v-model="form.paylevel"
                  disabled
                ></el-input> </el-form-item
              ><el-form-item label="支付时间">
                <el-input v-model="form.costtime" disabled>
                </el-input> </el-form-item
              ><el-form-item label="支付状态">
                <el-input v-model="form.paystatus" disabled></el-input>
              </el-form-item>
            </div>
            <div class="bottom">
              <el-form-item label="支付类型">
                <el-radio-group disabled v-model="form.coststatus">
                  <el-radio :label="0">
                    <img
                      width="150px"
                      src="http://property.admin.byesame.com/img/zfb1.4e5cf19b.png"
                      alt=""
                    />
                  </el-radio>
                  <el-radio :label="0">
                    <img
                      width="150px"
                      src="http://property.admin.byesame.com/img/wx1.f21631b0.png"
                      alt=""
                    />
                  </el-radio>
                  <el-radio :label="0">
                    <img
                      width="150px"
                      src="http://property.admin.byesame.com/img/ysf.a4d32ab5.png"
                      alt=""
                    />
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="回复内容">
                <p style="height: 200px">{{ form.costcontent }}</p>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表单数据
      form: {},
    };
  },
  methods: {
    //返回
    back() {
      this.$router.go(-1);
    },
    //初始化表单
    getData() {
      this.$axios
        .get("cost/getCostDetail", {
          params: {
            id: this.$route.query.detailId,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.form = res.data[0];
          console.log(this.form);
        });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.detail::v-deep {
  .box1 {
    .btn {
      position: fixed;
      right: 50px;
      top: 100px;
      z-index: 100;
    }
    .top {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      .el-form-item {
        width: 40%;
        .el-form-item__label {
          width: 100px !important;
        }
        .el-form-item__content {
          margin-left: 100px !important;
        }
      }
    }
    .bottom {
      display: flex;
      align-items: center;
      flex-direction: column;
      .el-form-item {
        width: 87%;
      }
      .el-radio-group {
        display: flex;
        flex-direction: row;
        .el-radio {
          display: flex;

          flex-direction: row;
          align-items: center;
        }
      }
    }
  }
}
</style>